<template>
  <div :style="style">
    {{ contentSetting.title || "标题栏" }}
  </div>
</template>

<script>
export default {
  props: {
    //组件的ID
    id: {
      required: true,
    },
    // 组件的样式
    styleSetting: {
      type: Object,
      default: () => {
        return {};
      },
    },
    // 组件的内容
    contentSetting: {
      type: Object,
      default: () => {
        return {
          title: "标题栏",
        };
      },
    },
  },
  computed: {
    style: function () {
      let styles = `padding-top:${this.styleSetting.paddingTop};
                    padding-bottom:${this.styleSetting.paddingBottom};
                    text-align:${this.styleSetting.textAlign};
                    font-weight:${this.styleSetting.fontWeight};
                    font-size:${this.styleSetting.fontSize}`;
      return styles;
    },
  },
};
</script>

<style lang="scss" scoped>
</style>